<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <title>Spark新建任务</title>
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{css/font-awesome.css}" rel="stylesheet" />
    <link th:href="@{css/plugins/iCheck/custom.css}" rel="stylesheet" />
    <link th:href="@{js/plugins/new_nouislider/nouislider.css}" rel="stylesheet" />
    <link th:href="@{css/animate.css}" rel="stylesheet" />
    <link th:href="@{css/style.css}" rel="stylesheet" />
    <link th:href="@{css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{js/plugins/ladda/ladda.min.css}" rel="stylesheet"/>
    <!--<link th:href="@{js/plugins/ladda/ladda-themeless.min.css}"/>-->

</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" >
       <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><small>提交任务表单</small></h5>
                    </div>
                    <div class="ibox-content">
                        <form id="f2" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">任务名</label>

                                <div class="col-sm-4">
                                    <input id="taskName" type="text" class="form-control" />
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">选择日期</label>
                                <div class="col-sm-10">
                                    <input placeholder="开始日期" class="form-control layer-date" id="start" />
                                    <input placeholder="结束日期" class="form-control layer-date" id="end" />
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">地区</label>

                                <div class="col-sm-10">
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="1" />北京</label>
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="2" />上海</label>
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="3" />广州</label>
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="4" />深圳</label>
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="5" />南京</label>
                                    <label class="checkbox-inline i-checks">
                                        <input name="city" type="checkbox" value="6" />杭州</label>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>

                                <div class="col-sm-4">
                                    <select class="form-control m-b" id="sex">
                                        <option value="0">不限</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-8">
                                    <div id="slider"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-6 col-sm-offset-2">
                                    <!--<button class="btn btn-primary" id="task_submit">提交任务</button>-->
                                    <button class="ladda-button" data-color="mint" data-size="s" data-style="slide-left" id="task_submit"><span class="ladda-label">提交任务</span></button>
                                    <!--<button class="btn btn-primary" id="getData">显示图表</button>-->
                                    <button class="ladda-button" data-color="mint" data-size="s" data-style="expand-right" id="getData"><span class="ladda-label">显示图表</span></button>
                                    <button class="ladda-button" data-color="blue" data-size="s" data-style="expand-right" type="reset"><span class="ladda-label">重置</span></button>
                                    <!--<button class="btn btn-white" type="reset">重置</button>-->
                                </div>
                            </div>
                        </form>
                        <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="ibox float-e-margins">-->
            <!--<div class="ibox-title">-->
                <!--<h5>任务列表</h5>-->
                <!--<div class="ibox-tools">-->
                    <!--<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>-->
                    <!--<a class="close-link"><i class="fa fa-times"></i></a>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="ibox-content">-->
                <!--<div class="row row-lg">-->
                    <!--<div class="col-sm-12">-->
                        <!--<div class="example-wrap">-->
                            <!--<div class="example">-->
                                <!--<div id="toolbar" class="btn-group m-t-sm">-->
                                    <!--<button type="button" class="btn btn-default" onclick="member_show('创建用户','${ctx}/system/user//list/add',null,'900',null)">-->
                                        <!--<i class="glyphicon glyphicon-plus"></i>-->
                                    <!--</button>-->
                                    <!--<button type="button" class="btn btn-default">-->
                                        <!--<i class="glyphicon glyphicon-trash"></i>-->
                                    <!--</button>-->
                                <!--</div>-->
                                <!--<table id="table"-->
                                       <!--data-toggle="table"-->
                                       <!--data-height="500"-->
                                       <!--data-search="true"-->
                                       <!--data-show-refresh="true"-->
                                       <!--data-show-toggle="true"-->
                                       <!--data-show-export="true"-->
                                       <!--data-show-pagination-switch="true"-->
                                       <!--data-show-columns="true"-->
                                       <!--data-striped="true"-->
                                       <!--data-pagination="true"-->
                                       <!--data-sort-name="stargazers_count"-->
                                       <!--data-sort-order="desc"-->
                                       <!--data-toolbar="#toolbar">-->
                                    <!--<thead>-->
                                    <!--<tr>-->
                                        <!--<th data-halign="center" data-align="center" data-field="state" data-checkbox="true"></th>-->
                                        <!--<th data-halign="center" data-align="center" data-sortable="true">id</th>-->
                                        <!--<th data-halign="center" data-align="center" data-sortable="true">任务名</th>-->
                                        <!--<th data-halign="center" data-align="center" data-sortable="true">任务状态</th>-->
                                        <!--<th data-halign="center" data-align="center" data-sortable="true">任务参数</th>-->
                                    <!--</tr>-->
                                    <!--</thead>-->
                                    <!--<tbody>-->
                                        <!--<tr th:each="task : ${tasks}">-->
                                            <!--<td></td>-->
                                            <!--<td th:text="${task.taskid}"></td>-->
                                            <!--<td th:text="${task.taskName}"></td>-->
                                            <!--<td th:text="${task.taskStatus}"></td>-->
                                            <!--<td th:text="${task.taskParam}"></td>-->
                                        <!--</tr>-->
                                    <!--</tbody>-->
                                <!--</table>-->
                            <!--</div>-->
                        <!--</div>-->

                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->


        <div id="graph_view" class="row" style="display:none;">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>session访问时长分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="session-time-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>session访问步长分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="session-length-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="graph_view2" class="row" style="display:none;">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>地域分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" class="echarts" id="city-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>访问时间分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" class="echarts" id="time-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <!-- 全局js -->
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/bootstrap.min.js}"></script>
    <script th:src="@{js/plugins/new_nouislider/wNumb.js}"></script>
    <script th:src="@{js/plugins/new_nouislider/nouislider.min.js}"></script>
    <script th:src="@{js/plugins/layer/layer.min.js}"></script>
    <script th:src="@{js/plugins/layer/laydate/laydate.js}"></script>

    <!-- iCheck -->
    <script th:src="@{js/plugins/iCheck/icheck.min.js}"></script>

    <!--<script th:src="@{js/plugins/echarts/echarts-all.js}"></script>-->
    <script th:src="@{js/plugins/echarts/echarts.min.js}"></script>
    <script th:src="@{js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
    <script th:src="@{js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

    <!-- loading插件 -->
    <script th:src="@{js/plugins/ladda/spin.js}"></script>
    <script th:src="@{js/plugins/ladda/ladda.js}"></script>
    <script th:src="@{js/plugins/ladda/ladda.jquery.min.js}"></script>
    <!--<script th:src="@{js/plugins/ladda/ladda.js}"></script>-->


    <!-- 自定义js -->
    <script th:src="@{js/index.js}"></script>
</body>
</html>